import type {ProColumns, ProFormInstance} from '@ant-design/pro-components';
import {ProTable} from '@ant-design/pro-components';
import '@umijs/max';
import {Modal} from 'antd';
import React, {useEffect, useRef} from 'react';

export type Props = {
  columns: ProColumns<API.User>[];
  onCancel: () => void;
  onSubmit: (values: API.User) => Promise<void>;
  visible: boolean;
  // 表单中需要编辑的数据
  values: API.User;
};
const UpdateModal: React.FC<Props> = (props) => {
  const {values, columns, visible, onCancel, onSubmit} = props;

  const ref = useRef<ProFormInstance>();
  useEffect(() => {
    if (ref) {
      ref.current?.setFieldsValue(values);
    }
  }, [values]);
  return (
    <Modal open={visible} footer={null} onCancel={() => onCancel?.()}>
      <ProTable
        type={'form'}
        columns={columns}
        formRef={ref}
        onSubmit={async (value) => {
          onSubmit?.(value);
        }}
      />
    </Modal>
  );
};
export default UpdateModal;
